<template>
  <div :class="{ bottomBorder: bottomBorder }">
    <div class="title">{{ hospitalName }}</div>
    <div class="title">{{ title }}</div>
    <div v-if="patCur" class="infoBefore">
      <div>病历号:{{ patCur.patientIdent }}</div>
    </div>
    <div v-if="patCur" class="info">
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">年龄：{{ patCur.age }}</div>
      <div class="item">病区：{{ patCur.wardName }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

import { usePatCur } from '@/hooks'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    bottomBorder: {
      type: [Boolean, String],
      default: true
    }
  },
  setup() {
    const state = reactive({
      hospitalName: window.hospitalName
    })

    const { patCur, gender } = usePatCur()

    return {
      ...toRefs(state),
      patCur,
      gender
    }
  }
})
</script>

<style scoped lang="scss">
.bottomBorder {
  border-bottom: 1px solid #000;
}

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.infoBefore {
  text-align: right;
  padding-bottom: 10px;
}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
</style>
